<template>
  <!-- 雪球 -->
  <div class="snowball_box">
    <!-- 列表1 -->
    <div class="snowball">
      <el-table
        :data="snowcycle"
        stripe
        :border="true"
        row-key="id"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="changeCellStyle"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :span-method="arraySpanMethod"
        style="width: 100%"
      >
        <el-table-column fixed="left" prop="date" label="周期/结构" width="90"></el-table-column>
        <el-table-column
          v-for="(item, index) in snowtitle"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.minWidth"
        ></el-table-column>
        <template slot="button">
          <button>追保雪球</button>
        </template>
      </el-table>
      <button class="btns">追保雪球</button>
    </div>
    <!-- 列表2 -->
    <div class="snowball1" style="margin-top: 16px">
      <el-table
        :data="snowcycle1"
        stripe
        :border="true"
        row-key="id"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="changeCellStyle"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :span-method="arraySpanMethod"
        style="width: 100%"
      >
        <el-table-column fixed="left" prop="date" label="周期/结构" width="90"></el-table-column>
        <el-table-column
          v-for="(item, index) in snowtitle1"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.minWidth"
        ></el-table-column>
      </el-table>
      <button class="btns">保底雪球</button>
    </div>
    <!-- 列表3 -->
    <div class="snowball2" style="margin-top: 16px">
      <el-table
        :data="snowcycle2"
        stripe
        :border="true"
        row-key="id"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="changeCellStyle"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :span-method="arraySpanMethod"
        style="width: 100%"
      >
        <el-table-column fixed="left" prop="date" label="周期/结构" width="90"></el-table-column>
        <el-table-column
          v-for="(item, index) in snowtitle2"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.minWidth"
        ></el-table-column>
      </el-table>
      <button class="btns">折价建仓</button>
    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  name: "Geometry1Snowball",

  data() {
    return {
      // 雪球表头
      snowtitle: [
        {
          label: "70-700",
          prop: "name",
          minWidth: 80
        },
        {
          label: "70-103",
          prop: "name",
          minWidth: 80
        },
        {
          label: "75-100",
          prop: "name",
          minWidth: 80
        },
        {
          label: "75-103",
          prop: "name",
          minWidth: 80
        },
        {
          label: "80-100",
          prop: "name",
          minWidth: 80
        },
        {
          label: "80-103",
          prop: "name",
          minWidth: 80
        },
        {
          label: "85-100",
          prop: "name",
          minWidth: 80
        },
        {
          label: "85-103",
          prop: "name",
          minWidth: 80
        }
      ],
      // 雪球数据
      snowcycle: [
        {
          id: 1,
          date: "6W",
          name: "12.25%",
          children: [
            {
              id: 41,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 42,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 2,
          date: "12W",
          name: "12.25%",
          children: [
            {
              id: 43,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 44,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 3,
          date: "16W",
          name: "12.25%",
          children: [
            {
              id: 45,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 46,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 4,
          date: "24W",
          name: "12.25%",
          children: [
            {
              id: 47,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 48,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 5,
          date: "保证金",
          name: "追保雪球保证金一般为30%，个别标的存在差异，需向卖方询价"
        }
      ],
      // 雪球表头1
      snowtitle1: [
        {
          label: "70-700",
          prop: "name",
          minWidth: 80
        },
        {
          label: "70-103",
          prop: "name",
          minWidth: 80
        },
        {
          label: "75-100",
          prop: "name",
          minWidth: 80
        },
        {
          label: "75-103",
          prop: "name",
          minWidth: 80
        },
        {
          label: "80-100",
          prop: "name",
          minWidth: 80
        },
        {
          label: "80-103",
          prop: "name",
          minWidth: 80
        },
        {
          label: "85-100",
          prop: "name",
          minWidth: 80
        },
        {
          label: "85-103",
          prop: "name",
          minWidth: 80
        }
      ],
      // 雪球数据1
      snowcycle1: [
        {
          id: 1,
          date: "6W",
          name: "12.25%",
          children: [
            {
              id: 41,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 42,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 2,
          date: "12W",
          name: "12.25%",
          children: [
            {
              id: 43,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 44,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 3,
          date: "16W",
          name: "12.25%",
          children: [
            {
              id: 45,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 46,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 4,
          date: "24W",
          name: "12.25%",
          children: [
            {
              id: 47,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 48,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 5,
          date: "保证金",
          name: "不追保雪球85敲入保证金15%，80敲入保证金20%，75敲入保证金25%"
        }
      ],
      // 雪球表头2
      snowtitle2: [
        {
          label: "70-700",
          prop: "name",
          minWidth: 80
        },
        {
          label: "70-103",
          prop: "name",
          minWidth: 80
        },
        {
          label: "75-100",
          prop: "name",
          minWidth: 80
        },
        {
          label: "75-103",
          prop: "name",
          minWidth: 80
        },
        {
          label: "80-100",
          prop: "name",
          minWidth: 80
        },
        {
          label: "80-103",
          prop: "name",
          minWidth: 80
        },
        {
          label: "85-100",
          prop: "name",
          minWidth: 80
        },
        {
          label: "85-103",
          prop: "name",
          minWidth: 80
        }
      ],
      // 雪球数据2
      snowcycle2: [
        {
          id: 1,
          date: "6W",
          name: "12.25%",
          children: [
            {
              id: 41,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 42,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 2,
          date: "12W",
          name: "12.25%",
          children: [
            {
              id: 43,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 44,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 3,
          date: "16W",
          name: "12.25%",
          children: [
            {
              id: 45,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 46,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 4,
          date: "24W",
          name: "12.25%",
          children: [
            {
              id: 47,
              date: "2M",
              name: "12.25%"
            },
            {
              id: 48,
              date: "2M",
              name: "12.25%"
            }
          ]
        },
        {
          id: 5,
          date: "保证金",
          name: "不追保雪球85敲入保证金15%，80敲入保证金20%，75敲入保证金25%"
        }
      ],
      aliasname_list: []
    };
  },
  mounted() {
    this.columnDrop1();
    this.columnDrop2();
    this.columnDrop3();
  },

  methods: {
    arraySpanMethod({ rowIndex, columnIndex }) {
      if (rowIndex === 12) {
        if (columnIndex === 0) {
          return [1, 1];
        } else if (columnIndex === 1) {
          return [1, 8];
        } else {
          return [];
        }
      }
    },
    changeCellStyle(row) {
      if (row.column.label == "周期/结构") {
        return "text-align:center";
      } else {
        return "color: #1657D9";
      }
    },
    // 列表——列拖动
    columnDrop1() {
      const _this = this;
      const wrapperTr = document.querySelector(
        ".snowball .el-table__header-wrapper tr"
      );
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const empty = 1;
          const oldItem1 = _this.snowtitle[evt.oldIndex - empty];
          this.newCol = evt.newIndex - 1;
          _this.snowtitle.splice(evt.oldIndex - empty, 1);
          _this.snowtitle.splice(evt.newIndex - empty, 0, oldItem1);
          console.log(_this.tabtitle);
        }
      });
    },
    // 列表——列拖动
    columnDrop2() {
      const _this = this;
      const wrapperTr = document.querySelector(
        ".snowball1 .el-table__header-wrapper tr"
      );
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const empty = 1;
          const oldItem1 = _this.snowtitle1[evt.oldIndex - empty];
          this.newCol = evt.newIndex - 1;
          _this.snowtitle1.splice(evt.oldIndex - empty, 1);
          _this.snowtitle1.splice(evt.newIndex - empty, 0, oldItem1);
          console.log(_this.snowtitle1);
        }
      });
    },
    // 列表——列拖动
    columnDrop3() {
      const _this = this;
      const wrapperTr = document.querySelector(
        ".snowball2 .el-table__header-wrapper tr"
      );
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const empty = 1;
          const oldItem1 = _this.snowtitle2[evt.oldIndex - empty];
          this.newCol = evt.newIndex - 1;
          _this.snowtitle2.splice(evt.oldIndex - empty, 1);
          _this.snowtitle2.splice(evt.newIndex - empty, 0, oldItem1);
          console.log(_this.snowtitle2);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.snowball_box {
  padding: 0 20px;
  box-sizing: border-box;
}
.snowball {
  position: relative;
  margin-top: 25px;
  .btns {
    position: absolute;
    right: 103px;
    bottom: 222px;
    width: 28px;
    height: 66px;
    line-height: 14px;
    font-size: 14px;
    text-align: center;
    background-color: #3377ff;
    border: none;
    border-radius: 2px;
    color: #fff;
  }
}
.snowball1 {
  position: relative;
  .btns {
    position: absolute;
    right: 103px;
    bottom: 222px;
    width: 28px;
    height: 66px;
    line-height: 14px;
    font-size: 14px;
    text-align: center;
    background-color: #3377ff;
    border: none;
    border-radius: 2px;
    color: #fff;
  }
}
.snowball2 {
  position: relative;
  .btns {
    position: absolute;
    right: 103px;
    bottom: 222px;
    width: 28px;
    height: 66px;
    line-height: 14px;
    font-size: 14px;
    text-align: center;
    background-color: #3377ff;
    border: none;
    border-radius: 2px;
    color: #fff;
  }
}
</style>